<!DOCTYPE html>
<html manifest="cache.appcache">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Talking Clown</title>
<link href="css/clown_animate.css" rel="stylesheet" type="text/css" />
<link href="css/hair.css" rel="stylesheet" type="text/css" />
<link href="css/moving.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="bg">
<div id="clown_bg">
  <!-- out_box -->
  <div id="out_box" class="static">
    <!-- face -->
    <div id="face">
      <!-- top_face -->
      <div id="top_face" class="gradient">
        <!-- eyebrow -->
        <div id="eyebrow">
          <div id="left_eyebrow_box">
            <div id="eyebrow_left"></div>
          </div>
          <div id="right_eyebrow_box">
            <div id="eyebrow_right"></div>
          </div>
        </div>
        <!-- end of eyebrow -->  

        <!-- eyes -->
        <div id="eye">
          <div class="eye_left eye1">
            <div class="eyes1">
              <div class="eyes2"></div>
            </div>
          </div>
          <div class="eye_right eye1">
            <div class="eyes1">
              <div class="eyes2"></div>
            </div>
          </div>
        </div>
        <!-- end of eyes -->
              
        <!-- nose -->
        <div id="nose"></div>
        <!-- end of nose -->
              
        <!-- Zygomatic -->
        <div id="Zygomatic">
          <div id="Zygomatic_left" class="Zygomatic1"></div>
          <div id="Zygomatic_right" class="Zygomatic1"></div>
        </div>
        <!-- end of Zygomatic -->

      </div>
      <!-- end of top_face -->
    
      <!-- down_face -->
      <div id="down_face" class="gradient">
        <div id="chin">
          <div id="Ldown_face" class="gradient" ></div>
          <div id="Rdown_face" class="gradient"></div>
        </div>
        <!-- mouth -->
        <div id="mouth">
          <div id="mouth_left">
            <div id="Lmouth" class="mouth1">
              <div id="Lmouth1" class="mouth2"></div>
            </div>
          </div>
          <div id="mouth_right">
            <div id="Rmouth" class="mouth1">
              <div id="Rmouth1" class="mouth2"></div>
            </div>
          </div>
          <div id="lips">
            <div id="or1"></div>
            <div id="oral">
              <div id="tongue"></div>
            </div>
          </div>
        </div>
        <!-- end of mouth --> 
      </div>
      <!-- end of down_face -->
    </div>
    <!-- end of face -->

    <!-- hair -->
    <div id="hair">  
      <div class="hair1 gradient1 radius1"></div>
      <div class="hair2 gradient2 radius2"></div>
      <div class="hair3 gradient3 radius3"></div> 
      <div class="hair4 gradient4 radius4"></div>
      <div class="hair5 gradient4 radius1"></div>
      <div class="hair6 gradient1 radius1"></div>
      <div class="hair7 gradient1 radius1"></div>
      <div class="hair8 gradient2 radius2"></div>
      <div class="hair9 gradient1 radius1"></div>
      <div class="hair10 gradient2 radius5"></div>
      <div class="hair11 gradient3 radius5"></div>
      <div class="hair12 gradient4 radius4"></div>
      <div class="hair13 gradient4 radius1"></div>
      <div class="hair14 gradient1 radius1"></div>
      <div class="hair15 gradient1 radius1"></div>
      <div class="hair16 gradient2 radius5"></div>      
    </div>
    <!-- end of hair -->      
  </div>
  <!-- end of out_box -->
  <div id="hat"><img src="images/hat.png" /></div>
  <!-- feet -->
  <div id="feet">
    <div id="left_foot"><img src="images/foot_left.png"/></div>
    <div id="right_foot"><img src="images/foot_right.png"/></div>
  </div>
  <!-- end of feet -->
  <audio id="audio_player" src="" style="display: none;"></audio>
</div>
</div>

<div id="tips_icon"></div>
<div id="side_menu">
  <div id="stage_icon" class="side_menu_icon"></div>
  <div id="nonbg_icon" class="side_menu_icon"></div>
  <div id="crowd_icon" class="side_menu_icon"></div>
  <div id="music_icon" class="side_menu_icon"></div>
  <div id="stop_icon" class="side_menu_icon"></div>
</div>

<script type="text/javascript" src="javascript/beatdetektor.js"></script>
<script type="text/javascript" src="javascript/webaudio.js"></script>
<script type="text/javascript">
  window.applicationCache.addEventListener('updateready', function(e) {
    if (window.applicationCache.status == window.applicationCache.UPDATEREADY) {
      window.applicationCache.swapCache();
      if (confirm('A new version of this site is available. Load it?')) {
        window.location.reload();
      }
    }
  }, false);

  var ftimer = 0;
  // three BPM minimum/maximum ranges: 48-95 BPM, 85-169 BPM and 150-250 BPM
  var bd = new BeatDetektor(48, 95);
  var vu = new BeatDetektor.modules.vis.VU();
  var basskick = new BeatDetektor.modules.vis.BassKick();

  var g_bgBox;
    
  function changeBackgroundSize() {
    var realHeight = document.documentElement.clientHeight;
    var realWidth =  document.documentElement.clientWidth;
    console.log(['height = ' + realHeight, 'width = ' + realWidth]);

    g_bgBox.style.height = realHeight + 'px';
    g_bgBox.style.paddingTop = (realHeight - 600)/2 + 'px';
  }

  function init() {
    g_bgBox = document.getElementById('bg');
    audioPlayer = document.getElementById('audio_player');
    changeBackgroundSize();
  };

  window.addEventListener('load', init(), false);
  window.addEventListener('resize', changeBackgroundSize, false);

  var g_outBox = document.getElementById('out_box');
  var g_clownBody = document.getElementById('clown_bg');
  var g_leftFoot = document.getElementById('left_foot');
  var g_rightFoot = document.getElementById('right_foot');
  var g_hat = document.getElementById('hat');

  var g_tipsIcon = document.getElementById('tips_icon');
  g_tipsIcon.addEventListener('mousemove', function() {
    g_tipsIcon.style.display = 'none';
    g_sideMenu.style.right = '-3px';
  }, false);

  var g_sideMenu = document.getElementById('side_menu');
  g_sideMenu.addEventListener('mouseout', function(e){
    if (!this.contains(e.toElement)) {
      g_tipsIcon.style.display = 'block';
      g_sideMenu.style.right = '-76px';
    }
  });

  function changeMouthStyle(percent) {
    console.log(percent);
    if (percent <= 130) {
      g_outBox.className = 'static';
    } else if (percent <= 145) {
      g_outBox.className = 'small_moving';
    } else if (percent <= 160) {
      g_outBox.className = 'middle_moving';
    } else {
      g_outBox.className = 'large_moving';
    }
  }

  function tapFeetAndHat(currentTime, inputArray) {
    bd.process(currentTime, inputArray);
    ftimer += bd.last_update;
    if (ftimer > 1.0 / 24.0) {
      vu.process(bd, ftimer);
      basskick.process(bd);
      ftimer = 0;
    }

    if (vu.vu_levels.length) {
      var z = vu.vu_levels[0];

      if (currentTime < 5) {
        g_leftFoot.style.webkitTransform = z > 0.3 ? ('rotateZ(' +  (z * 40) + 'deg)') : 'none';
        g_rightFoot.style.webkitTransform = z > 0.3 ? 'rotateZ(-4deg)' : 'none';
      } else {
        g_leftFoot.style.webkitTransform = z > 0.15 ? ('rotateZ(' +  (z * 40) + 'deg)') : 'none';
        g_rightFoot.style.webkitTransform = z > 0.15 ? 'rotateZ(-4deg)' : 'none';

        if (basskick.isKick && z > 0.60) {
          g_hat.style.webkitTransform = 'rotate(16deg) translate(' + (z * 55) + 'px, -' + (z * 55) + 'px)';
        } else if (basskick.isKick && z > 0.50) {
          g_hat.style.webkitTransform = 'rotate(12deg) translate(' + (z * 50) + 'px, -' + (z * 40) + 'px)';
        } else {
          g_hat.style.webkitTransform = 'rotate(10deg)';
        }
      }
    }
  };

  var BUTTON_LIST = [
    { buttonId: 'stage_icon',
      isMusicMode: false,
      analyserCallback: changeMouthStyle,
      jsProcessorCallback: null,
      playbackRate: 1.333,
      bgMode: BackgroundMode.ROOM,
      fileName: 'resources/talking.mp3',
      bgImageFile: 'bk_stage.jpg'
    },
    { buttonId: 'nonbg_icon',
      isMusicMode: false,
      analyserCallback: changeMouthStyle,
      jsProcessorCallback: null,
      playbackRate: 1.333,
      bgMode: null,
      fileName: 'resources/talking.mp3',
      bgImageFile: 'bk_lonely.jpg'
    },
    { buttonId: 'crowd_icon',
      isMusicMode: false,
      analyserCallback: changeMouthStyle,
      jsProcessorCallback: null,
      playbackRate: 1.333,
      bgMode: BackgroundMode.ROOM,
      fileName: 'resources/talking.mp3',
      bgImageFile: 'bk_crowd.jpg'
    },
    { buttonId: 'music_icon',
      isMusicMode: true,
      analyserCallback: null,
      jsProcessorCallback: tapFeetAndHat,
      playbackRate: 1.15,
      bgMode: BackgroundMode.ROOM,
      fileName: 'resources/programmer.mp3',
      bgImageFile: 'bk_stage.jpg'
    }
  ];

  var soundConverter;
  var audioPlayer, audioPlayTimer = null;
  function stopAll(isMusicMode) {
    g_clownBody.className = isMusicMode ? 'reflection' : '';
    g_outBox.className = 'static';
    if (audioPlayTimer) {
      audioPlayer.src = '';
      clearInterval(audioPlayTimer);
      audioPlayTimer = null;
    }
    if (soundConverter != undefined) {
      soundConverter.stop();
    }
  }

  for (var i = 0; i < BUTTON_LIST.length; i++) {
    document.getElementById(BUTTON_LIST[i].buttonId).addEventListener('click',
        (function(button) {
           return function(){
             g_bgBox.style.backgroundImage = 'url(images/' + button.bgImageFile + ')';

             stopAll(button.isMusicMode);
             soundConverter = new SoundConverter(button.analyserCallback,
                                                 button.jsProcessorCallback,
                                                 button.playbackRate,
                                                 button.bgMode);
             soundConverter.loadAudioStream(button.fileName, function(buffer) {
                 soundConverter.sourceBuffer_ = buffer;
                 soundConverter.playOnGrain();
             });
           };
         }
        )(BUTTON_LIST[i]), false);
  }

  document.getElementById('crowd_icon').addEventListener('click', function() {
    audioPlayer.volume = 0.6;
    audioPlayer.src = 'resources/laugh.wav';
    audioPlayTimer = setInterval('audioPlayer.play()', 6000);
  }, false);

  document.getElementById('music_icon').addEventListener('click', function() {
    audioPlayer.volume = 0.3;
    audioPlayer.src = 'resources/clapping.mp3';
    audioPlayer.play();
    audioPlayTimer = setInterval('audioPlayer.play()', 12000);
  }, false);

  document.getElementById('stop_icon').addEventListener('click', function() {
    stopAll(false);
  }, false);

</script>
</body>
</html>